<script setup lang="ts">
import { ref } from 'vue'

// 初始化
const degreeData = ref(['专科', '本科'])
const academicYearData = ref([
	{ value: '2020', label: '2020年' },
	{ value: '2021', label: '2021年' },
	{ value: '2022', label: '2022年' },
	{ value: '2023', label: '2023年' }
])
const semesterData = ref([{ value: '上学期' }, { value: '下学期' }])
const gradeData = ref([
	{ value: '2021', label: '2021级' },
	{ value: '2022', label: '2022级' },
	{ value: '2023', label: '2023级' },
	{ value: '2024', label: '2024级' }
])
const classData = ref([
	{ value: '1', label: '1班' },
	{ value: '2', label: '2班' }
])
const examTypeData = ref([{ value: '正式考' }, { value: '补考' }])
const data = ref([])
</script>

<template>
	<div>
		<!-- 功能栏 -->
		<div class="Control-bar">
			<div>
				<el-select v-model="academicYearData" placeholder="学年" size="large" style="width: 140px">
					<el-option
						v-for="item in academicYearData"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					/>
				</el-select>
				<el-select v-model="semesterData" placeholder="学期" size="large" style="width: 140px">
					<el-option
						v-for="item in semesterData"
						:key="item.value"
						:label="item.value"
						:value="item.value"
					/>
				</el-select>
				<el-select v-model="degreeData" placeholder="学历" size="large" style="width: 140px">
					<el-option v-for="item in degreeData" :key="item" :label="item" :value="item" />
				</el-select>
				<el-select v-model="classData" placeholder="班级" size="large" style="width: 140px">
					<el-option
						v-for="item in classData"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					/>
				</el-select>
				<el-select v-model="examTypeData" placeholder="考试类型" size="large" style="width: 140px">
					<el-option
						v-for="item in examTypeData"
						:key="item.value"
						:label="item.value"
						:value="item.value"
					/>
				</el-select>
			</div>

			<div class="btn-box">
				<el-button type="primary">筛选</el-button>
				<el-button type="primary">默认</el-button>
			</div>
		</div>

		<!-- 表格 -->
		<div class="table-box">
			<el-table :data="data" style="width: 100%">
				<el-table-column type="index" width="width"></el-table-column>
				<el-table-column prop="academic_year" label="学年" width="width"></el-table-column>
				<el-table-column prop="semester" label="学期" width="width"></el-table-column>
				<el-table-column prop="grade" label="年级" width="width"></el-table-column>
				<el-table-column prop="class" label="班级" width="width"></el-table-column>
				<el-table-column prop="uname" label="姓名" width="width"></el-table-column>
				<el-table-column prop="student_id" label="学号" width="width"></el-table-column>
				<!-- <el-table-column fixed="right" label="操作" min-width="120">
          <template #scope>
            <el-button type="primary" size="small">通过</el-button>
            <el-button type="primary" size="small">驳回</el-button>
          </template>
        </el-table-column> -->
			</el-table>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.Control-bar {
	display: flex;
	margin-bottom: 15px;

	& > div:nth-child(1) {
		width: 70%;
	}

	.btn-box {
		margin-left: auto;
	}
}

.table-box {
	border: 2px inset #ccc;
	.el-table {
	}
}
</style>
